<template>
	<view class="center">
		<u-navbar title="智能匹配" leftIcon=' ' placeholder='true'></u-navbar>
		<view class="tabs-box">
			<view :class="selecttab==1?'box-item':'box-item2'" @click="ontabs(1)">
				智能匹配
			</view>
			<view :class="selecttab==2?'box-item':'box-item2'" @click="ontabs(2)">
				活跃优先
			</view>
			<view :class="selecttab==3?'box-item':'box-item2'" @click="ontabs(3)">
				距离优先
			</view>
		</view>
		<view class="tabs-box">
			<view :class="selecttab==1?'box-item3':'box-item4'" @click="show=true">
				{{chengform()}}
			</view>
			<view :class="selecttab==2?'box-item3':'box-item4'" @click="show2=true">
				{{addlist?addlist[0]+addlist[1]:'所属地区'}}
			</view>
			<view :class="selecttab==3?'box-item3':'box-item4'" @click="show3=true">
				经济条件
			</view>
		</view>

		<view class="goodslit">

			<!-- 无商品维护页面 -->
			<view v-if="!dataswitch"><u-empty style="top:340rpx;position: relative;" text="暂无数据"></u-empty></view>

			<view class="container" v-if="dataswitch">
				<!-- 瀑布流商品列表 -->
				<view class="centergoods">
					<view class="goods-wrapper" v-if="(index + 1) % 2 != 0" v-for="(item, index) in goodsList"
						:key="index" @click="ongoods(item)">
						<image class="img"
							src="https://t2.jyimg.com/5f/92/a9042fdda0a3daa4e200b1249b4b/207509725o.jpg!d">
						</image>
						<view class="goods-item">
							<view class="title">
								安琪
							</view>
							<view class="item">
								<view class="Price">18岁/168cm</view>
								<view class="Sold">上海</view>
							</view>
							<view class="goods-button">
								<u-button text="打招呼" color="linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%)"
									shape="circle"></u-button>
							</view>
						</view>
					</view>
				</view>
				<view class="centergoods">
					<view class="goods-wrapper" v-if="(index + 1) % 2 == 0" v-for="(item, index) in goodsList"
						:key="index" @click="ongoods(item)">
						<image class="img"
							src="https://t1.jyimg.com/cb/24/e11234510c0f41f4441ef604e78a/207197325o.jpg!d">
						</image>
						<view class="goods-item">
							<view class="title">
								小雨
							</view>
							<view class="item">
								<view class="Price">22岁/173cm</view>
								<view class="Sold">山东</view>
							</view>
							<view class="goods-button">
								<u-button text="打招呼" color="linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%)"
									shape="circle"></u-button>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<u-tabbar activeColor="#FF8E53" :value="value1" @change="change1" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" icon="home" @click="click1"></u-tabbar-item>
			<u-tabbar-item text="搜索" icon="list-dot" @click="click1"></u-tabbar-item>
			<u-tabbar-item text="消息" icon="chat" @click="click1"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" @click="click1"></u-tabbar-item>
		</u-tabbar>
		<u-popup :show="show" @close="close" :round="10" closeable='true'>
			<view class="popup-box">
				<view class="popup-item">
					<view class="popup-title">
						年龄（岁）
					</view>
					<view class="popup-text">
						<view :class="form.age==item? 'text-item2':'text-item'" v-for="(item,index) in agelist"
							:key="index" @click="onage(item)">
							{{item}}
						</view>
					</view>
				</view>
				<view class="popup-item">
					<view class="popup-title">
						身高（CM）
					</view>
					<view class="popup-text">
						<view :class="form.height==item? 'text-item2':'text-item'" v-for="(item,index) in heightlist"
							:key="index" @click="onheight(item)">
							{{item}}
						</view>
					</view>
				</view>
				<view class="popup-item">
					<view class="popup-title">
						学历
					</view>
					<view class="popup-text">
						<view :class="form.background==item? 'text-item2':'text-item'"
							v-for="(item,index) in backgroundlist" :key="index" @click="onbackground(item)">
							{{item}}
						</view>
					</view>
				</view>
				<view class="popup-item">
					<view class="popup-title">
						婚姻
					</view>
					<view class="popup-text">
						<view :class="form.marriage==item? 'text-item2':'text-item'"
							v-for="(item,index) in marriagelist" :key="index" @click="onmarriage(item)">
							{{item}}
						</view>
					</view>
				</view>
				<view class="popup-item">
					<view class="popup-title">
						子女
					</view>
					<view class="popup-text">
						<view :class="form.children==item? 'text-item2':'text-item'"
							v-for="(item,index) in childrenlist" :key="index" @click="onchildren(item)">
							{{item}}
						</view>
					</view>
				</view>
				<view class="bottom-button">
					<u-button text="重置" @click="onreset"></u-button>
					<u-button text="确定" color="linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%)"
						@click="onsubmit"></u-button>
				</view>
			</view>
		</u-popup>

		<u-picker :show="show2" ref="uPicker" :columns="columns" @close="close3" @confirm="confirm"
			@change="changeHandler"></u-picker>
		<u-popup :show="show3" @close="close2" :round="10" closeable='true'>
			<view class="popup-box">
				<view class="popup-item">
					<view class="popup-title">
						收入范围
					</view>
					<view class="popup-text">
						<view :class="form2.income==item? 'text-item2':'text-item'" v-for="(item,index) in incomelsit"
							:key="index" @click="onincome(item)">
							{{item}}
						</view>
					</view>
				</view>
				<view class="popup-item">
					<view class="popup-title">
						住房情况
					</view>
					<view class="popup-text">
						<view :class="form2.housing==item? 'text-item2':'text-item'" v-for="(item,index) in housinglsit"
							:key="index" @click="onhousing(item)">
							{{item}}
						</view>
					</view>
				</view>
				<view class="popup-item">
					<view class="popup-title">
						买车情况
					</view>
					<view class="popup-text">
						<view :class="form2.car==item? 'text-item2':'text-item'" v-for="(item,index) in carlist"
							:key="index" @click="oncar(item)">
							{{item}}
						</view>
					</view>
				</view>

				<view class="bottom-button">
					<u-button text="重置" @click="onreset2"></u-button>
					<u-button text="确定" color="linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%)"
						@click="onsubmit2"></u-button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				show: false,
				show2: false,
				show3: false,
				addlist: '',
				columns: [
					['中国', '美国'],
					['深圳', '厦门', '上海', '拉萨']
				],
				columnData: [
					['深圳', '厦门', '上海', '拉萨'],
					['得州', '华盛顿', '纽约', '阿拉斯加']
				],
				value1: 1,
				selecttab: 1,

				carlist: ['不限', '未购车', '已购车'],
				housinglsit: ['不限', '未购房', '已购房'],
				incomelsit: ['不限', '2千以下', '2-5千', '5千-1万', '1万-2万', '2万-5万', '5万以上'],
				childrenlist: ['不限', '有子女', '无子女'],
				marriagelist: ['不限', '未婚', '离异', '丧偶'],
				backgroundlist: ['不限', '高中/中专及以下', '大专', '本科', '硕士及以上'],
				agelist: ['不限', '18-25', '26-30', '31-35', '36-40'],
				heightlist: ['不限', '150-160', '161-170', '171-181', '181-190', '191-200'],
				goodsList: [{
					id: '1'
				}, {
					id: '2'
				}, {
					id: '3'
				}, {
					id: '4'
				}, {
					id: '5'
				}, {
					id: '6'
				}],
				form: {
					age: '',
					height: '',
					background: '',
					marriage: '',
					children: ''
				},
				form2: {
					income: '',
					housing: '',
					car: ''
				},

				dataswitch: true

			};
		},

		computed: {
			...mapGetters(['imgBaseUrl'])
		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.addlist = e.value
				console.log('confirm', e)
				this.show2 = false
			},
			chengform() {
				let allEmpty = Object.values(this.form).every(value => value === "");
				if (allEmpty) {
					return '个人信息'
				} else {
					return Object.values(this.form).join(',');
				}

			},
			oncar(e) {
				this.form2.car = e
			},
			onhousing(e) {
				this.form2.housing = e
			},
			onincome(e) {
				this.form2.income = e
			},
			onsubmit2() {
				console.log(this.form2, 'sssss')
				this.close2()
			},
			onreset2() {
				this.form2 = {
						age: '',
						height: '',
						background: '',
						marriage: '',
						children: ''
					},
					this.close2()
			},
			onsubmit() {
				console.log(this.form, 'sssss')
				this.close()
			},
			onreset() {
				this.form = {
						age: '',
						height: '',
						background: '',
						marriage: '',
						children: ''
					},
					this.close()
			},
			onchildren(e) {
				this.form.children = e
			},
			onmarriage(e) {
				this.form.marriage = e
			},
			onbackground(e) {
				this.form.background = e
			},
			onheight(e) {
				this.form.height = e
			},
			onage(e) {
				this.form.age = e
			},
			open() {
				// console.log('open');
			},
			close3() {
				this.show2 = false
				// console.log('close');
			},
			close2() {
				this.show3 = false
				// console.log('close');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			ontabs(e) {
				this.selecttab = e
			},
			click1(e) {
				this.value1 = e
				console.log('click1', e);
				if (e == 0) {
					uni.redirectTo({
						url: '/pages/index/index'
					})
				} else if (e == 2) {
					uni.redirectTo({
						url: '/pages/message-list/index'
					})
				} else if (e == 3) {
					uni.redirectTo({
						url: '/pages/user/index'
					})
				}
			},
			change1() {},
			//点击
			ongoods(item) {
				uni.navigateTo({
					url: '../../pages/goods-detail/index'
				});
				console.log(item, '点击了商品，这里要跳转详情页');
			},

		}
	};
</script>
<style lang="scss">
	@import '@/styles/mixin.scss';

	.center {
		min-height: 100%;
		background-color: #f5f5f5;

		.tabs-box {
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.box-item {
				font-size: 32rpx;
				font-weight: bold;
				color: #FF8E53;
			}

			.box-item2 {
				font-size: 32rpx;
				font-weight: bold;
			}

			.box-item3 {
				text-align: center;
				width: 150rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #FF8E53;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 20rpx;
				border: 1rpx solid #FF8E53;
			}

			.box-item4 {
				text-align: center;
				width: 150rpx;
				font-size: 26rpx;
				font-weight: bold;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 20rpx;
				border: 1rpx solid black;
			}

		}

		.goodslit {
			.container {
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				background-color: #f5f5f5;
				z-index: 6;
				margin-top: 20rpx;

				.centergoods {
					padding: 5rpx 8rpx 0 8rpx;
					background-color: #f5f5f5;
					width: 50%;
					box-sizing: border-box;
					border-radius: 30rpx;

					.goods-wrapper {
						margin-top: 15rpx;
						padding: 0 0 25rpx 0;
						background-color: #ffffff;
						align-items: center;
						border-radius: 30rpx;
						overflow: hidden;
						width: 100%;

						.img {
							width: 340rpx;
							height: 340rpx;
						}

						.goods-item {
							padding-right: 20rpx;

							background-color: #ffffff;
							margin: 20rpx;

							.title {
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								-webkit-box-orient: vertical;
								font-size: 26rpx;
								color: #222222;
								font-weight: 400;
							}

							.item {
								margin: 10rpx;
								display: flex;
								justify-content: space-between;
								align-items: baseline;
								width: 100%;
								height: 55rpx;

								.Price {
									font-size: 26rpx;
									font-weight: 500;
									// color: #f53942;
								}

								.Sold {
									font-size: 26rpx;
									font-weight: 500;
									color: #888888;
								}
							}

							.goods-button {}

							//
						}
					}
				}
			}

		}

		.popup-box {
			padding: 20rpx;

			.popup-item {
				padding-top: 20rpx;

				.popup-title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.popup-text {
					padding-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-evenly;
					;
					flex-wrap: wrap;

					.text-item {
						margin-top: 10rpx;
						padding: 10rpx 20rpx;
						border: 1rpx solid black;
						border-radius: 10rpx;
					}

					.text-item2 {
						margin-top: 10rpx;
						padding: 10rpx 20rpx;
						border: 1rpx solid #FF8E53;
						color: #FF8E53;
						border-radius: 10rpx;
					}
				}
			}

			.bottom-button {
				padding: 20rpx;
				display: flex;
			}
		}
	}
</style>